<template>
  <view class="container">
    <u-popup :show="onShow" mode="bottom" border-radius="16" :closeOnClickOverlay="false">
      <view class="price-detail">
        <view class="header">
          <view class="title">价格明细</view>
          <u-icon size="40" name="close" @click="handleClose" class="close-icon"></u-icon>
        </view>
        <view class="price-item">
          <view class="label">商品总价(共{{ formData.totalNum }}件)</view>
          <view class="value">￥{{ formData.proTotalPrice }}</view>
        </view>
        <u-line></u-line>
        <view class="price-item">
          <view class="label">折扣方式</view>
          <view class="value">
            {{ formData.discountType == 1 ? "消费补贴折扣" : "平台积分折扣" }}
          </view>
        </view>
        <u-line></u-line>
        <view class="price-item">
          <view class="label">抵扣分数</view>
          <view class="value">{{ formData.useIntegral }}</view>
        </view>
        <u-line></u-line>
        <view class="price-item">
          <view class="label">抵扣金额</view>
          <view class="value">{{ formData.deductionPrice }}</view>
        </view>
        <u-line></u-line>
        <view class="price-item">
          <view class="label">实付金额</view>
          <view class="value">￥{{ Number(formData.payPrice).toFixed(2) }}</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { orderInfo } from "../../../utils/merorder/mer";
export default {
  props: {
    orderId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      onShow: false,
      formData: { cost: "" },
    };
  },
  mounted() {
    if (this.orderId) {
      this.orderInfo();
    }
  },
  methods: {
    /** 打开弹窗 */
    handleOpen() {
      console.log("%%%%%%%%%%%%%%%%%%%%%%%%%%%%%");

      this.onShow = true;
    },
    handleClose() {
      this.onShow = false;
    },
    orderInfo() {
      orderInfo({
        orderId: this.orderId,
      }).then((res) => {
        this.formData = res.data || {};
      });
    },
  },
};
</script>

<style scoped>
.container {
  position: relative;
}

.price-detail {
  padding: 20px;
  background-color: #fff;
  border-radius: 16px 16px 0 0;
}

.header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.title {
  font-size: 16px;
  text-align: center;
}

.close-icon {
  position: absolute;
  top: 0;
  right: 0;
}

.price-item {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 26rpx;
}

.label {
  color: #666;
}

.value {
  color: #888;
}
</style>
